<template>
  <el-config-provider :locale="zhCn">
    <div class="wechat-notice">
      <!-- 筛选条件区域 -->
      <filter-form
        v-model="filterForm"
        :form-items="formItems"
        @search="handleSearch"
        @reset="resetFilter"
        labelWidth="120px"
        @update:modelValue="handleFilterChange"
      />

      <!-- 选项卡区域 -->
      <el-tabs type="card" v-model="activeTab" class="notice-tabs" @tab-click="handleTabClick">
        <el-tab-pane label="微信配置" name="list">
          <!-- 卡片式列表展示区域 -->
          <div class="cards-section" v-loading="loading" style="display: block">
            <div v-for="item in noticeList" :key="item.id" class="notification-card">
              <!-- 微信名称信息 -->
              <div class="ai-wechat-section">
                <div class="ai-wechat-header">
                  <ai-wechat-info :avatar-url="item.user_avatar_url" :user-name="item.user_name" />
                  <div class="ai-wechat-status">
                    <el-tag type="success" size="small">微信名称</el-tag>
                  </div>
                </div>
              </div>

              <!-- 通知微信号列表 -->
              <div class="notify-wechats-section">
                <div class="section-header">
                  <h4>通知微信 ({{ item.sendWxList.length }})</h4>
                  <el-button type="primary" size="small" @click="handleAddNotifyWechat(item)" class="add-btn">
                    <el-icon><Plus /></el-icon>
                    新增微信
                  </el-button>
                </div>

                <div class="notify-wechats-list">
                  <!-- 标签式展示通知微信号 -->
                  <div v-if="item.sendWxList.length > 0" class="notify-tags-wrapper">
                    <div v-for="(wechat, wechatIndex) in item.sendWxList" :key="wechatIndex" class="notify-tag-item">
                      <div class="notify-tag" :class="{ disabled: wechat.state === 1 }">
                        <el-avatar :size="24" :src="wechat.user_avatar_url" class="tag-avatar" />
                        <div class="tag-content">
                          <span class="tag-name">{{ wechat.user_name }}</span>
                        </div>
                        <div class="tag-actions">
                          <el-switch
                            v-model="wechat.state"
                            :active-value="0"
                            :inactive-value="1"
                            size="small"
                            @change="(val) => handleNotifyWechatStatus(item, wechat, val)"
                          />
                          <el-button type="danger" size="small" link @click="handleDeleteNotifyWechat(item, wechat)" class="delete-btn">
                            <el-icon><Close /></el-icon>
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 空状态 -->
                  <div v-if="item.sendWxList.length === 0" class="empty-state">
                    <el-empty description="暂无通知微信号" :image-size="60">
                      <!-- <el-button type="primary" @click="handleAddNotifyWechat(item)"> 添加通知微信号 </el-button> -->
                    </el-empty>
                  </div>
                </div>
              </div>
            </div>

            <!-- 空状态 -->
            <div v-if="noticeList.length === 0 && !loading" class="global-empty-state">
              <el-empty description="暂无通知配置" :image-size="120">
                <el-button type="primary" @click="handleSearch">刷新列表</el-button>
              </el-empty>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="待处理" name="latest">
          <div class="cards-section" v-loading="loading">
            <div v-for="item in latestNoticeList" :key="item.id" class="notification-log-card">
              <div class="log-header">
                <div class="log-time">
                  <el-icon><Clock /></el-icon>
                  <span>{{ item.dateTime }}</span>
                </div>
                <el-tag type="success" size="small">
                  <el-icon><Bell /></el-icon>
                  最新通知
                </el-tag>
              </div>

              <div class="log-content">
                <div class="wechat-pair">
                  <div class="ai-wechat">
                    <div class="wechat-label">微信名称</div>
                    <ai-wechat-info :avatar-url="item.aiUserAvatarUrl" :user-name="item.aiUserName" :wx-id="item.wx_id" />
                  </div>

                  <div class="arrow-icon">
                    <el-icon><ArrowRight /></el-icon>
                  </div>

                  <div class="notify-wechat">
                    <div class="wechat-label">通知微信</div>
                    <ai-wechat-info :avatar-url="item.sendUserAvatarUrl" :user-name="item.sendUserName" :wx-id="item.send_wx_id" />
                  </div>
                </div>

                <div class="message-content" v-if="item.message && item.message.trim()">
                  <div class="message-label">通知内容</div>
                  <el-tooltip :content="item.message" placement="top" :show-after="500" :hide-after="0">
                    <div class="message-text">{{ item.message }}</div>
                  </el-tooltip>
                </div>
              </div>
            </div>

            <!-- 空状态 -->
            <div v-if="latestNoticeList.length === 0 && !loading" class="global-empty-state">
              <el-empty description="暂无最新通知" :image-size="120">
                <el-button type="primary" @click="loadLatestNotices">刷新列表</el-button>
              </el-empty>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="日志" name="history">
          <!-- 列表展示区域 -->
          <div class="table-section" v-loading="loading">
            <el-table :data="historyNoticeList" border style="width: 100%" class="custom-table" empty-text="暂无历史记录">
              <el-table-column type="index" label="序号" width="60" align="center" />

              <el-table-column label="微信名称" width="200" align="left">
                <template #default="scope">
                  <ai-wechat-info :avatar-url="scope.row.aiUserAvatarUrl" :user-name="scope.row.aiUserName" />
                </template>
              </el-table-column>

              <el-table-column label="客户微信" width="200" align="left">
                <template #default="scope">
                  <ai-wechat-info :avatar-url="scope.row.customerUserAvatarUrl" :user-name="scope.row.customerUserName" />
                </template>
              </el-table-column>

              <el-table-column label="通知微信" width="200" align="left">
                <template #default="scope">
                  <ai-wechat-info :avatar-url="scope.row.sendUserAvatarUrl" :user-name="scope.row.sendUserName" />
                </template>
              </el-table-column>

              <el-table-column label="触发内容" min-width="200" align="left">
                <template #default="scope">
                  <div v-if="scope.row.message && scope.row.message.trim()" class="message-content">
                    <el-tooltip :content="scope.row.message" placement="top" :show-after="500" :hide-after="0" :disabled="scope.row.message.length <= 30">
                      <div class="message-text">
                        {{ scope.row.message.length > 30 ? scope.row.message.substring(0, 30) + '...' : scope.row.message }}
                      </div>
                    </el-tooltip>
                  </div>
                  <span v-else class="no-message">无内容</span>
                </template>
              </el-table-column>
              <el-table-column label="介入时间" width="200" align="center">
                <template #default="scope">
                  <div class="time-cell">
                    <span>{{ scope.row.interventionTime }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="触发时间" width="200" align="center">
                <template #default="scope">
                  <div class="time-cell">
                    <span>{{ scope.row.dateTime }}</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- 空状态 -->
            <div v-if="historyNoticeList.length === 0 && !loading" class="table-empty-state">
              <el-empty description="暂无历史记录" :image-size="120">
                <el-button type="primary" @click="loadHistoryNotices">刷新列表</el-button>
              </el-empty>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!-- 分页 -->
      <pagination v-if="activeTab != 'list'" v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" @pagination="handlePagination" />

      <!-- 选择通知微信号对话框 -->
      <FriendSelectDialog
        v-model="notifyDialogVisible"
        :multiple="true"
        title="选择通知微信号"
        :selected-friends="[]"
        @confirm="handleFriendSelectConfirm"
        @cancel="notifyDialogVisible = false"
      />
    </div>
  </el-config-provider>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getWechatNotification, updateWechatNotify, getWechatNotifyLog } from '@/api/userRate/wechatNotice';
import FilterForm from '@/components/FilterForm/index.vue';
import Pagination from '@/components/Pagination/index.vue';
import AiWechatInfo from '@/components/AiWechatInfo/index.vue';
import FriendSelectDialog from '@/components/FriendSelect/FriendSelectDialog.vue';
import type { FormItem } from '@/components/FilterForm/index.vue';
import zhCn from 'element-plus/es/locale/lang/zh-cn';

// 获取当前用户信息
const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
const currentUsername = ref(userInfo.username || '');
const account = userInfo.username || '';

// 接口类型定义
interface WechatNotification {
  id: number;
  wx_id: string;
  send_wxid: string;
  state: number;
  sendWxList: {
    user_name: string;
    user_avatar_url: string;
    wx_account: string;
    wechat_account_id: string;
    send_wxid: string;
    state: number;
    id: number;
    wx_id: string;
  }[];
  user_name: string;
  user_avatar_url: string;
  my_wx_id: string;
  user_open_id: string;
  user_open_id_name: string;
  user_create_time: string;
  user_info_update_time: string;
  wechat_account_id: string;
}

interface WechatNotifyLog {
  id: number;
  wx_id: string;
  send_wx_id: string;
  message: string;
  dateTime: string;
  aiUserName: string;
  aiUserAvatarUrl: string;
  sendUserName: string;
  sendUserAvatarUrl: string;
  status: string;
}

interface PaginatedResponse<T> {
  records: T[];
  total: number;
  current: number;
  size: number;
}

// 筛选表单
const filterForm = reactive({
  aiName: '',
  name: ''
});

// 表单项配置
const formItems = computed<FormItem[]>(() => {
  return [
    {
      label: '微信名称名称',
      prop: 'aiName',
      type: 'input',
      placeholder: '请输入微信名称名称'
    },
    {
      label: '通知微信',
      prop: 'name',
      type: 'input',
      placeholder: '请输入通知微信'
    }
  ];
});

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 加载状态
const loading = ref(false);

// 通知列表数据
const noticeList = ref<WechatNotification[]>([]);
const latestNoticeList = ref<WechatNotifyLog[]>([]);
const historyNoticeList = ref<WechatNotifyLog[]>([]);

// 弹窗相关
const notifyDialogVisible = ref(false);
const currentRow = ref<WechatNotification | null>(null);

// 选项卡相关
const activeTab = ref('list');

// 查询方法
const handleSearch = async (formData?: Record<string, any>) => {
  if (activeTab.value === 'list') {
    try {
      loading.value = true;
      // 使用传入的表单数据或当前的表单数据
      const searchData = formData || filterForm;
      const params = {
        operator: searchData.aiName || undefined,
        notifyWechat: searchData.name || undefined,
        current: currentPage.value,
        size: pageSize.value,
        account
      };

      // 移除所有 undefined 的参数
      Object.keys(params).forEach((key) => {
        if (params[key as keyof typeof params] === undefined) {
          delete params[key as keyof typeof params];
        }
      });

      const response = await getWechatNotification(currentUsername.value, params);
      if (response.code === 200) {
        noticeList.value = response.data.records;
        total.value = response.data.total;
        currentPage.value = response.data.current;
        pageSize.value = response.data.size;
      } else {
        ElMessage.error(response.msg || '查询失败');
      }
    } catch (error) {
      console.error('查询失败:', error);
      ElMessage.error('查询失败，请稍后重试');
    } finally {
      loading.value = false;
    }
  } else if (activeTab.value === 'latest') {
    await loadLatestNotices();
  } else if (activeTab.value === 'history') {
    await loadHistoryNotices();
  }
};

// 加载待处理通知
const loadLatestNotices = async () => {
  try {
    loading.value = true;
    const searchData = filterForm;
    const params = {
      operator: searchData.aiName || undefined,
      notifyWechat: searchData.name || undefined,
      current: currentPage.value,
      size: pageSize.value,
      account
    };

    // 移除所有 undefined 的参数
    Object.keys(params).forEach((key) => {
      if (params[key as keyof typeof params] === undefined) {
        delete params[key as keyof typeof params];
      }
    });

    const response = await getWechatNotifyLog(currentUsername.value, '1', params);
    if (response.code === 200) {
      const data = response.data as PaginatedResponse<WechatNotifyLog>;
      latestNoticeList.value = data.records;
      total.value = data.total;
      currentPage.value = data.current;
      pageSize.value = data.size;
    } else {
      ElMessage.error(response.msg || '获取最新通知失败');
    }
  } catch (error) {
    console.error('获取最新通知失败:', error);
    ElMessage.error('获取最新通知失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};

// 加载日志
const loadHistoryNotices = async () => {
  try {
    loading.value = true;
    const searchData = filterForm;
    const params = {
      operator: searchData.aiName || undefined,
      notifyWechat: searchData.name || undefined,
      current: currentPage.value,
      size: pageSize.value,
      account
    };

    // 移除所有 undefined 的参数
    Object.keys(params).forEach((key) => {
      if (params[key as keyof typeof params] === undefined) {
        delete params[key as keyof typeof params];
      }
    });

    const response = await getWechatNotifyLog(currentUsername.value, '0', params);
    if (response.code === 200) {
      const data = response.data as PaginatedResponse<WechatNotifyLog>;
      historyNoticeList.value = data.records;
      total.value = data.total;
      currentPage.value = data.current;
      pageSize.value = data.size;
    } else {
      ElMessage.error(response.msg || '获取历史详情失败');
    }
  } catch (error) {
    console.error('获取历史详情失败:', error);
    ElMessage.error('获取历史详情失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};

// 重置筛选
const resetFilter = () => {
  filterForm.aiName = '';
  filterForm.name = '';
  currentPage.value = 1;
  pageSize.value = 10;
  handleSearch();
};

// 分页方法
const handlePagination = ({ pageNum, pageSize: size }: { pageNum: number; pageSize: number }) => {
  currentPage.value = pageNum;
  pageSize.value = size;
  if (activeTab.value === 'list') {
    handleSearch();
  } else if (activeTab.value === 'latest') {
    loadLatestNotices();
  } else if (activeTab.value === 'history') {
    loadHistoryNotices();
  }
};

// 选项卡切换处理
const handleTabClick = async (tab: any) => {
  currentPage.value = 1;
  pageSize.value = 10;
  if (tab.props.name === 'list') {
    await handleSearch();
  } else if (tab.props.name === 'latest') {
    await loadLatestNotices();
  } else if (tab.props.name === 'history') {
    await loadHistoryNotices();
  }
};

// 新增通知微信号
const handleAddNotifyWechat = (row: WechatNotification) => {
  currentRow.value = row;
  notifyDialogVisible.value = true;
};

// 处理好友选择确认
const handleFriendSelectConfirm = async (selectedFriends: any[]) => {
  if (!currentRow.value) return;

  try {
    // 构建send_wxid_list数组，包含原有的sendWxList和新增的微信号
    const existingSendWxList = currentRow.value.sendWxList.map((item) => ({
      id: item.id,
      wx_id: item.wx_id,
      send_wxid: item.send_wxid,
      state: item.state
    }));

    // 添加新选择的好友
    const newFriends = selectedFriends.map((friend) => ({
      id: 0, // 新增的ID设为0，后端会自动生成
      wx_id: currentRow.value!.wx_id,
      send_wxid: friend.wxAccount,
      state: 0
    }));

    const send_wxid_list = [...existingSendWxList, ...newFriends];

    const response = await updateWechatNotify({
      id: currentRow.value.id,
      wx_id: currentRow.value.wx_id,
      send_wxid_list,
      account
    } as any);

    if (response.code === 200) {
      ElMessage.success('添加通知微信号成功');
      notifyDialogVisible.value = false;
      handleSearch();
    } else {
      ElMessage.error(response.msg || '添加失败');
    }
  } catch (error) {
    console.error('添加失败:', error);
    ElMessage.error('添加失败，请稍后重试');
  }
};

// 通知微信号状态变更
const handleNotifyWechatStatus = async (row: WechatNotification, wechat: any, state: number) => {
  if (!row || !wechat) {
    ElMessage.error('数据不完整，无法更新状态');
    return;
  }

  try {
    // 构建send_wxid_list数组，包含原有的sendWxList和更新的微信号
    const send_wxid_list = [
      ...row.sendWxList.map((item) => ({
        id: item.id,
        wx_id: row.wx_id,
        send_wxid: item.send_wxid,
        state: item.send_wxid === wechat.send_wxid ? state : item.state
      }))
    ];

    const response = await updateWechatNotify({
      id: row.id,
      wx_id: row.wx_id,
      send_wxid_list,
      account
    });
    if (response.code === 200) {
      ElMessage.success(state === 0 ? '已启用通知' : '已停用通知');
      handleSearch();
    } else {
      ElMessage.error(response.msg || '操作失败');
    }
  } catch (error) {
    console.error('操作失败:', error);
    ElMessage.error('操作失败，请稍后重试');
  }
};

// 删除通知微信号
const handleDeleteNotifyWechat = async (row: WechatNotification, wechat: any) => {
  try {
    await ElMessageBox.confirm('确定要删除该通知微信号吗？', '提示', {
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    });

    // 过滤掉要删除的微信号，只保留其他微信号
    const send_wxid_list = row.sendWxList
      .filter((item) => item.send_wxid !== wechat.send_wxid)
      .map((item) => ({
        id: item.id,
        wx_id: item.wx_id,
        send_wxid: item.send_wxid,
        state: item.state
      }));

    const response = await updateWechatNotify({
      id: row.id,
      wx_id: row.wx_id,
      send_wxid_list,
      account
    });
    if (response.code === 200) {
      ElMessage.success('删除成功');
      handleSearch();
    } else {
      ElMessage.error(response.msg || '删除失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error);
      ElMessage.error('删除失败，请稍后重试');
    }
  }
};

// 处理筛选条件变化
const handleFilterChange = (val: any) => {
  filterForm.aiName = val.aiName || '';
  filterForm.name = val.name || '';
};

// 初始化
onMounted(() => {
  handleSearch();
});
</script>

<style lang="scss" scoped>
.wechat-notice {
  padding: 20px;
  min-height: calc(100vh - 40px);

  .cards-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
    margin: 20px;
    min-height: 20vh;
    .notification-card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      transition: all 0.3s ease;
      border: 1px solid #e8eaed;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      }

      .ai-wechat-section {
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        padding: 20px;
        color: #1976d2;
        border-bottom: 1px solid #e0e0e0;

        .ai-wechat-header {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .ai-wechat-status {
            .el-tag {
              background: rgba(25, 118, 210, 0.1);
              border: 1px solid rgba(25, 118, 210, 0.3);
              color: #1976d2;
            }
          }
        }
      }

      .notify-wechats-section {
        padding: 20px;

        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;

          h4 {
            margin: 0;
            color: #1a1a1a;
            font-size: 16px;
            font-weight: 600;
          }

          .add-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 14px 16px;
            font-size: 13px;
            border-radius: 15px;
            transition: all 0.2s ease;

            &:hover {
              transform: translateY(-1px);
            }
          }
        }

        .notify-wechats-list {
          .notify-tags-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;

            .notify-tag-item {
              .notify-tag {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 8px 12px;
                background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
                border: 1px solid #b3e5fc;
                border-radius: 20px;
                transition: all 0.3s ease;
                min-width: 200px;

                &:hover {
                  transform: translateY(-1px);
                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                }

                &.disabled {
                  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
                  border-color: #bdbdbd;
                  opacity: 0.7;

                  .tag-content {
                    .tag-name,
                    .tag-id {
                      color: #9e9e9e;
                    }
                  }
                }

                .tag-avatar {
                  flex-shrink: 0;
                }

                .tag-content {
                  flex: 1;
                  min-width: 0;

                  .tag-name {
                    display: block;
                    font-weight: 500;
                    color: #1976d2;
                    font-size: 13px;
                    line-height: 1.2;
                    margin-bottom: 2px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }

                  .tag-id {
                    display: block;
                    font-size: 11px;
                    color: #666;
                    line-height: 1.2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                }

                .tag-actions {
                  display: flex;
                  align-items: center;
                  gap: 6px;
                  flex-shrink: 0;

                  .delete-btn {
                    padding: 2px;
                    min-height: auto;

                    .el-icon {
                      font-size: 12px;
                    }
                  }
                }
              }
            }
          }

          .notify-wechat-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            margin-bottom: 8px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e8eaed;
            transition: all 0.2s ease;

            &:hover {
              background: #f0f2f5;
              border-color: #d0d7de;
            }

            &:last-child {
              margin-bottom: 0;
            }

            .wechat-info {
              display: flex;
              align-items: center;
              gap: 12px;
              flex: 1;

              .wechat-details {
                .wechat-name {
                  font-weight: 500;
                  color: #1a1a1a;
                  font-size: 14px;
                  margin-bottom: 2px;
                }

                .wechat-id {
                  font-size: 12px;
                  color: #6e7781;
                }
              }
            }

            .wechat-actions {
              display: flex;
              align-items: center;
              gap: 8px;

              .el-switch {
                transform: scale(0.9);
              }

              .delete-btn {
                padding: 6px;
                border-radius: 6px;
                transition: all 0.2s ease;

                &:hover {
                  background-color: #fef0f0;
                  transform: scale(1.05);
                }
              }
            }
          }

          .empty-state {
            padding: 40px 20px;
            text-align: center;
          }
        }
      }
    }

    .notification-log-card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      transition: all 0.3s ease;
      border: 1px solid #e8eaed;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      }

      &.history-card {
        border-left: 4px solid #909399;
      }

      .log-header {
        background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e0e0e0;

        .log-time {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #606266;
          font-size: 14px;

          .el-icon {
            color: #909399;
          }
        }

        .el-tag {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;

          .el-icon {
            font-size: 12px;
          }
        }
      }

      // 最新通知的特殊样式
      &:not(.history-card) .log-header {
        background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
        border-bottom: 1px solid #c3e6cb;
      }

      .log-content {
        padding: 20px;

        .wechat-pair {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20px;
          padding: 16px;
          background: #f8f9fa;
          border-radius: 8px;
          border: 1px solid #e8eaed;

          .ai-wechat,
          .notify-wechat {
            flex: 1;
            text-align: center;

            .wechat-label {
              font-size: 12px;
              color: #909399;
              margin-bottom: 8px;
              font-weight: 500;
            }
          }

          .arrow-icon {
            padding: 0 20px;
            color: #409eff;
            font-size: 20px;
          }
        }

        .message-content {
          .message-label {
            font-size: 12px;
            color: #909399;
            margin-bottom: 8px;
            font-weight: 500;
          }

          .message-text {
            padding: 12px;
            background: #f8f9fa;
            border-radius: 6px;
            border: 1px solid #e8eaed;
            color: #1a1a1a;
            font-size: 14px;
            line-height: 1.5;
            word-break: break-word;
            max-height: 100px; /* 4行文字的高度: 14px * 1.5 * 4 */
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            cursor: pointer;
            transition: all 0.2s ease;

            &:hover {
              background: #f0f2f5;
            }
          }
        }
      }
    }

    .global-empty-state {
      grid-column: 1 / -1;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 400px;
    }
  }
}

.notice-tabs {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 8px;
  // padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  :deep(.el-tabs__header) {
    margin: 20px 20px 0px 20px !important;
  }
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

  .el-table__cell {
    padding: 10px 0;
  }

  .el-table__header {
    th {
      padding: 12px 0;
      background: linear-gradient(to bottom, #f5f7fa, #f0f2f5);
      font-weight: 600;
      color: #1a1a1a;
      font-size: 13px;
      border-bottom: 1px solid #ebeef5;
    }
  }

  .el-table__row {
    td {
      padding: 10px 0;
      border-bottom: 1px solid #f0f2f5;
    }

    &:hover {
      td {
        background-color: #f8f9fa;
      }
    }
  }
}
.table-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;

  .custom-table {
    :deep(.el-table__header) {
      th {
        background-color: #f5f7fa;
        color: #606266;
        font-weight: 600;
      }
    }

    :deep(.el-table__row) {
      &:hover {
        td {
          background-color: #f5f7fa;
        }
      }
    }
  }

  .time-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 13px;

    .el-icon {
      color: #9ca3af;
      font-size: 14px;
    }
  }

  .message-content {
    .message-text {
      color: #374151;
      font-size: 13px;
      line-height: 1.5;
      background-color: #f3f4f6;
      padding: 6px 10px;
      border-radius: 4px;
      display: inline-block;
      max-width: 100%;
      word-break: break-word;

      &:hover {
        background-color: #e5e7eb;
      }
    }
  }

  .no-message {
    color: #9ca3af;
    font-style: italic;
    font-size: 12px;
  }

  .table-empty-state {
    padding: 40px 0;
    text-align: center;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .wechat-notice {
    padding: 10px;

    .cards-section {
      grid-template-columns: 1fr;
      gap: 15px;

      .notification-card {
        .ai-wechat-section {
          padding: 15px;
        }

        .notify-wechats-section {
          padding: 15px;

          .section-header {
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
          }
        }
      }
    }
  }
}
.friend-info {
  margin: 0 !important;
}
</style>
